<!-- 搜索页面，也可以是商城页面 -->
<template>
  <div>
        <div id="info" ref="viewport">
        <div v-for="(item,index) in searchList" :key="index" @click="goDetails(item.id)">
            <img :src="item.img" alt="" >
            <div id="info2">
                <div><p>{{item.title}}</p><p>{{item.houseType}}</p></div>
                <div id="info3">
                    <div id="rentype">{{item.rentType}}</div>
                    <div id="price">{{item.price}}</div>
                </div>
            </div>
        </div>
        </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      searchList: [],
      serch:[]
    };
  },
   methods: {
   goDetails(e){//点击跳转到详情页面
      this.$router.push({name:"details",params:{id:e}})
   }
  },
  mounted() {
    let netThis=this;
    let numberGrou=0;
    let number2=1
   document.getElementById("info").addEventListener("scroll", function(){
       numberGrou=Math.floor(this.scrollTop/600);
      if(numberGrou==number2){
        console.log("我行动了")
           netThis.searchList=Array.from(netThis.searchList).concat(netThis.serch)
           number2++;//反复判断
      }
    }, true);
  },
  async created() {
    const re = await axios.get("http://localhost:3000/search");
    this.searchList = re.data;
    this.serch = re.data;
  }
  }
</script>

<style lang="less" scoped>
#info{
  overflow-y: scroll;
  position: relative;
  height: 1000px;
    img{
        width: 96vw;
        height: 40vh;
    }
    #info2{
      font-size: 0.8rem;
      height: 12vh;
      display: flex;
      justify-content: space-around;
      position:absolute;
      margin-top: -12.5vh;
      background-color: rgba(246, 246, 246,0.8);
      font-weight: bold;
      width: 100%;
      #info3{
        width: 40%;
        display: flex;
        flex-direction: column;
       justify-content:space-around;
       justify-content: space-evenly;
       #rentype{
         font-size: 0.9rem;
         height: 4vh;
         line-height: 4vh;
         width: 90%;
         border: 1px solid rgb(231, 226, 226);
         background-color: #fff;
         border-radius: 5%;
         letter-spacing: 0.5rem;
         color: #000;
       }
       #price{
          height: 4vh;
         line-height: 4vh;
         width: 90%;
         color: red;
         font-size: 1rem;
       }
      }
    }
}

</style>